<template>
  <div class="login-page-box">
    <p class="page-title">南京市疫情防控管理平台</p>
    <div class="form-area-box">
      <p class="login-form-title">登录</p>
      <el-form :inline="true" :model="formData">
        <el-row>
          <el-col :span="24">
            <el-form-item label="账号">
              <el-input type="text" v-model="formData.userAccount" placeholder="请输入账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="密码">
              <el-input type="password" v-model="formData.userpwd" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="handleLogin">登&nbsp;&nbsp;录</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
let me;
import { login } from '../../api/login.api';
export default {
  data() {
    return {
      formData: {
        userAccount: "",
        userpwd: ""
      },
    };
  },
  created() {
    let _this = this;
    // 键盘回车事件 添加
    // 方式1：onkeydown
    // document.onkeydown = function (e) {
    //   if (e && e.key == "Enter") {
    //     _this.handleLogin();
    //   }
    // }
    // 方式2：onkeyup
    document.onkeyup = function (e) {
      if (window.event.keyCode === 13) {
        _this.handleLogin();
      }
    };
  },
  mounted() {
    me = this;
  },
  beforeDestroy() {
    // 键盘回车事件 移除
    // document.onkeydown = function (e) {
    //   if (e && e.key == "Enter") {
    //     // me.handleLogin();
    //   }
    // }
    document.onkeyup = function (e) {
      if (e && e.key == "Enter") {
        // me.handleLogin();
      }
    }
  },
  methods: {
    // 回车登录或按钮登录
    handleLogin() {
      let errorTip = !me.formData.userAccount ? "请输入账号~" :
        !me.formData.userpwd ? "请输入密码~" : "";
      if (!!errorTip) {
        me.$message.error(errorTip);
        return;
      }
      login({
        account: me.formData.userAccount,
        password: me.formData.userpwd,
      }).then(res => {
        if (res.code == "200") {
          me.$message.success("登录成功");
          // 登录态保持1h
          document.cookie = `token=${res.data.token}; expires=${new Date(new Date().getTime() + 60 * 60 * 1000).toUTCString()}; path=/`;
          localStorage.setItem("userName", res.data.name);
          localStorage.setItem("userAccount", res.data.account);
          localStorage.setItem("token", res.data.token);
          me.$store.commit("clearTab");
          // 回到来源页面
          if (me.$route.params && me.$route.params.targetPage) {
            me.$router.replace(me.$route.params.targetPage);
          } else {
            me.$router.replace("index");
          }
        } else {
          me.$message.error(res.msg || "登录失败");
        }
      }).catch(err => {
        me.$message.error(err.statusText || "对不起，系统繁忙，请稍后再试~");
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.login-page-box {
  width: 100vw;
  height: 100vh;
  background: url("../../resources/images/nationalTradeCenterBJ.png") no-repeat
    0 0;
  background-size: cover;
  font-family: "宋体";
  font-size: 1.2em;

  .page-title {
    text-align: left;
    padding: 24px 0 0 24px;
    font-size: 1.4em;
    color: #fff;
  }

  .form-area-box {
    position: absolute;
    top: 18vh;
    left: 50vw;
    width: 30vw;
    padding: 32px 0;
    background: #fff;
    text-align: center;

    .login-form-title {
      font-size: 1.2em;
      margin-bottom: 24px;
    }

    .el-form {
      .el-button {
        margin-top: 10px;
        padding: 12px 32px;
        font-size: 1.2em;
      }
    }
  }
}
</style>